import React, { useState } from 'react';
import { Layout, Avatar, Menu, Dropdown } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  KeyOutlined,
  AppstoreOutlined,
  LogoutOutlined,
} from '@ant-design/icons';
import '../assets/css/home.less';
import SideMenu from '../components/SideMenu';
import { useSelector, Link } from 'umi';
import UpdatePassword from '../components/profile/UpdatePassword';

const { Header, Sider, Content } = Layout;

export default function index(props) {
  const [collapsed, SetCollapsed] = useState(false);
  const state = useSelector((state) => state.user);
  const [isModalVisible, setIsModalVisible] = useState(false); //修改密码
  console.log('state', state);
  const toggle = () => {
    SetCollapsed(!collapsed);
    console.log('index', props);
  };
  const closeModal = () => {
    setIsModalVisible(false);
  };
  const signOut = () => {
    props.history.push('/login');
    localStorage.removeItem('token');
  };
  const menu = (
    <Menu>
      <Menu.Item key="0" icon={<UserOutlined />}>
        <Link to="/profile">个人中心</Link>
      </Menu.Item>
      <Menu.Item key="1" icon={<KeyOutlined />}>
        <span onClick={() => setIsModalVisible(true)}>密码修改</span>
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="2" icon={<AppstoreOutlined />}>
        系统定制
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item onClick={signOut} key="4" icon={<LogoutOutlined />}>
        退出登录
      </Menu.Item>
    </Menu>
  );
  return (
    <Layout className="layout">
      <Sider
        className="layout-sider"
        trigger={null}
        collapsible
        collapsed={collapsed}
        width={240}
      >
        <div className="sider-logo">
          <img
            src="http://xawn.f3322.net:8002/dist/static/img/logo.png"
            alt=""
          />
          <span>赤兔养车</span>
        </div>
        <SideMenu></SideMenu>
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }}>
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: 'trigger',
              onClick: toggle,
            },
          )}
          <div className="site-layout-text">
            {state.loginInfo ? (
              <img src={state.loginInfo.user.avatar} alt="" />
            ) : (
              <Avatar size="small" icon={<UserOutlined />} />
            )}
            <Dropdown overlay={menu} trigger={['click']}>
              <a
                onClick={(e) => e.preventDefault()}
                style={{ margin: '0 10px' }}
              >
                欢迎[{state.loginInfo ? state.loginInfo.user.username : 'user'}
                ]登录
              </a>
            </Dropdown>
          </div>
        </Header>
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          {props.children}
          {isModalVisible ? (
            <UpdatePassword
              closeModal={closeModal}
              isModalVisible={isModalVisible}
            ></UpdatePassword>
          ) : null}
        </Content>
      </Layout>
    </Layout>
  );
}
